<!--
 * @Des: 表单抄送
 * @Author: jin_yc
 * @Date: 2019-11-08 10:21:45
 * @LastEditor: jin_yc
 * @LastEditTime: 2021-12-13 19:52:32
 -->
<template>
  <div class="my-task-container">
    <fks-query-page
      v-loading="loading"
      :page-sizes="[15, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      :current-page.sync="page"
      :page-size.sync="size"
      :data="tableData"
      highlight-current-row
      :total="total"
      :table-name="LANG.FC_CC"
      @query="getData"
      @clear="clear"
      @sort-change="sortHandler"
    >
      <template slot="search">
        <fks-search-item :label="LANG.FORM_NAME">
          <fks-input
            v-model="title"
            @keyup.enter.native="getData"
          />
        </fks-search-item>
        <fks-search-item :label="LANG.CC_ORIGINATOR">
          <fks-input
            v-model="senderUserFullName"
            @keyup.enter.native="getData"
          />
        </fks-search-item>
        <fks-search-item :label="LANG.LOOKUP_STATUS">
          <fks-select
            v-model="status"
            clearable
            placeholder
            @change="getData"
          >
            <fks-option
              :key="0"
              :label="LANG.UNREAD"
              value="0"
            >
              {{ LANG.UNREAD }}
            </fks-option>
            <fks-option
              :key="1"
              :label="LANG.READ"
              value="1"
            >
              {{ LANG.READ }}
            </fks-option>
          </fks-select>
        </fks-search-item>
        <fks-search-item
          :span="12"
          :label="LANG.START_TIME"
        >
          <fks-time-span-pick
            value-format="yyyy-MM-dd"
            :start-time.sync="startTime"
            :end-time.sync="endTime"
          />
        </fks-search-item>
      </template>
      <template>
        <fks-table-column
          type="index"
          align="center"
          label="#"
        />
        <fks-table-column
          :label="LANG.FORM_NAME"
          is-link
          header-align="center"
          align="left"
          min-width="180"
        >
          <template slot-scope="scope">
            <span @click="viewHandler(scope.row)">{{ scope.row.title }}</span>
          </template>
        </fks-table-column>
        <fks-table-column
          prop="senderUserFullName"
          min-width="100"
          :label="LANG.CC_ORIGINATOR"
          align="center"
        />
        <!-- <fks-table-column prop="receiverUserFullName" width="180" :label="'接收人'" align="center"></fks-table-column> -->
        <fks-table-column
          min-width="140"
          prop="createDate"
          :label="LANG.CREATE_TIME"
          align="center"
          sortable
        >
          <template slot-scope="scope">
            {{
              scope.row.createDate
                ? $dayjs(scope.row.createDate).format('YYYY-MM-DD HH:mm')
                : ''
            }}
          </template>
        </fks-table-column>
        <fks-table-column
          min-width="80"
          prop="status"
          :label="LANG.LOOKUP_STATUS"
          align="center"
        >
          <template slot-scope="scope">
            <fks-tag v-if="scope.row.status == '0'">
              {{ LANG.UNREAD }}
            </fks-tag>
            <fks-tag
              v-else
              type="success"
            >
              {{ LANG.READ }}
            </fks-tag>
          </template>
        </fks-table-column>
      </template>
    </fks-query-page>
  </div>
</template>

<script>
import { viewCirculation, getCirculation } from '../api'
export default {
  name: 'RecevierPage',
  components: {},
  data() {
    return {
      loading: false,
      senderUserFullName: '', // 发起人
      title: '',
      type: 'receiver', // 抄送类型
      startTime: '', // 发布时间-开始时间 格式yyyy-MM-dd HH:mm:ss
      endTime: '', // 发布时间-开始时间 格式yyyy-MM-dd HH:mm:ss
      status: '', // 抄送状态
      page: 1,
      size: 15,
      total: 0,
      sortOrder: '',
      sortColumn: '',
      tableData: []
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      this.loading = true
      const params = {
        senderUserFullName: this.senderUserFullName,
        title: this.title,
        type: this.type,
        order: this.sortOrder,
        startTime: this.startTime ? this.startTime + ' 00:00:00' : '',
        endTime: this.endTime ? this.endTime + ' 23:59:59' : '',
        status: this.status,
        column: this.sortColumn,
        page: this.page,
        size: this.size
      }
      getCirculation(params).then((res) => {
        if (res.status) {
          this.tableData = res.data.list
          this.total = res.data.total
        }
        this.loading = false
      })
    },
    /**
     * @description: 编辑
     * @param {row} 被编辑行数据
     */
    clear() {
      this.senderUserFullName = ''
      this.title = ''
      this.startTime = ''
      this.endTime = ''
      this.status = ''
      this.getData()
    },
    viewHandler(data) {
      if (data.formBizId && data.formKey && data.processType == '2') {
        if (data.status == '1') {
          this.$router.push({
            path:
              this.$route.path +
              '/customForm/view/' +
              data.formKey +
              '/' +
              data.formBizId,
            query: {
              taskName: data.taskName,
              processInstanceId: data.processInstanceId
            }
          })
        } else {
          viewCirculation(data.id).then((res) => {
            if (res.status) {
              this.getData()
              this.$router.push({
                path:
                  this.$route.path +
                  '/customForm/view/' +
                  data.formKey +
                  '/' +
                  data.formBizId,
                query: {
                  taskName: data.taskName,
                  processInstanceId: data.processInstanceId
                }
              })
            }
          })
        }
      } else if (data.formBizId && data.formKey && data.processType == '1') {
        if (data.status == '1') {
          this.$router.push({
            path:
              this.$route.path +
              '/form/view/' +
              data.formKey +
              '/' +
              data.formBizId,
            query: {
              taskName: data.taskName,
              processInstanceId: data.processInstanceId
            }
          })
        } else {
          viewCirculation(data.id).then((res) => {
            if (res.status) {
              this.getData()
              this.$router.push({
                path:
                  this.$route.path +
                  '/form/view/' +
                  data.formKey +
                  '/' +
                  data.formBizId,
                query: {
                  taskName: data.taskName,
                  processInstanceId: data.processInstanceId
                }
              })
            }
          })
        }
      } else {
        this.$message.warning(this.LANG.MISSING_PARAMETER)
      }
    },
    /**
     * @description: 排序
     */
    sortHandler(data) {
      this.sortOrder = data.order
        ? data.order == 'ascending'
          ? 'asc'
          : 'desc'
        : null
      this.sortColumn = data.prop
      this.getData()
    }
  }
}
</script>

<style lang="scss" scoped>
.my-task-container {
  position: relative;
  height: 100%;
  overflow: auto;

  .search-bar {
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: #eee;
    }
  }
}

.btns {
  margin-bottom: 20px;
}
</style>
